import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'Index',
        component: () => import(/* webpackChunkName: "Index" */ '../views/index/Index.vue'),
        meta: {
            title: 'vue3 | 首页'
        }
    },
    {
        path: '/setup',
        name: 'Setup',
        component: () => import(/* webpackChunkName: "Setup" */ '../views/setup/index.vue'),
        meta: {
            title: 'setup | defineComponent'
        }
    },
    {
        path: '/compont',
        name: 'Compont',
        component: () => import(/* webpackChunkName: "Compont" */ '../views/compot/index.vue'),
        meta: {
            title: '组件 | '
        }
    },
    {
        path: '/router',
        name: 'Router',
        component: () => import(/* webpackChunkName: "Router" */ '../views/routerPage/index.vue'),
        meta: {
            title: '路由 | '
        },
        children: [
            {
                path: ':id',
                name: "child01",
                component: () => import(/* webpackChunkName: "child01" */ '../views/routerPage/child01.vue'),
                meta: {
                    title: '路由 | 子路由'
                },
            }
        ]
    },
    {
        path: '/store',
        name: 'Store',
        component: () => import(/* webpackChunkName: "Store" */ '../views/store/index.vue'),
        meta: {
            title: '状态管理 | '
        }
    },
    {
        path: '/axios',
        name: 'Ajax',
        component: () => import(/* webpackChunkName: "Ajax" */ '../views/ajax/index.vue'),
        meta: {
            title: '网络请求 | '
        }
    },
    {
        path: '/:pathMatch(.*)*',
        name: 'NotFound',
        component: () => import(/* webpackChunkName: "NotFound" */ '../views/404page/index.vue'),
        meta: {
            title: '404'
        }
    }
]

const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes,
    scrollBehavior() {
        return {
            top: 0,
            left: 0
        }
    }
})

router.beforeEach(async (to , from, next): Promise<void> => {
    if (to.meta && to.meta.title) {
        document.title = to.meta.title
    }
    next()
})


export default router
